@use "sass:map";
@use "sass:color";

$colors: () !default;
// 基础颜色
$base-colors: (
  "white": #ffffff,
  "black": #000000,
  "grey": #bfbfbf,
  "light-grey": #f4f4f4,
  "dark-grey": #484848,
  // 测试色
  "test": #ff0000,
);
// 主题颜色
$theme-colors: (
  "primary": (
    "base": #eed675,
  ),
  "secondary": (
    "base": #d0daa2,
  ),
  "success": (
    "base": #a2d3ec,
  ),
  "warning": (
    "base": #ecb68e,
  ),
  "danger": (
    "base": #e19c9c,
  ),
  "error": (
    "base": #84a5bd,
  ),
  "info": (
    "base": #beb1e7,
  ),
);

// 生成主题颜色
$colors: map.deep-merge($base-colors, $theme-colors);
@debug ($colors);
// 获取常用颜色
$color-white: map.get($base-colors, "white");
$color-black: map.get($base-colors, "black");
$color-light-grey: map.get($base-colors, "light-grey");
$color-dark-grey: map.get($base-colors, "dark-grey");
$color-primary: map.get($theme-colors, "primary", "base");
$color-secondary: map.get($theme-colors, "secondary", "base");
$color-success: map.get($theme-colors, "success", "base");
$color-warning: map.get($theme-colors, "warning", "base");
$color-danger: map.get($theme-colors, "danger", "base");
$color-error: map.get($theme-colors, "error", "base");
$color-info: map.get($theme-colors, "info", "base");

// 文字颜色
$text-color: () !default;
$text-color: map.deep-merge(
  (
    // 主色
    "default": #484848,
    // 辅助色
    "auxiliary": #7c808c,
    // 禁用色
    "disabled": #cecece,
    // 占位符色
    "placeholder": #c9cdd9
  ),
  $text-color
);
// 文字尺寸
$font-size: () !default;
$font-size: map.deep-merge(
  (
    "small": 12px,
    "default": 16px,
    "large": 22px,
  ),
  $font-size
);
// 控件大小
$component-size: () !default;
$component-size: map.deep-merge(
  (
    "small": 24px,
    "default": 32px,
    "large": 40px,
  ),
  $component-size
);
// 边框颜色
$border-color: () !default;
$border-color: map.deep-merge(
  (
    "default": #727272,
    // 边框主色
    "disabled": #ebeef5,
    // 边框禁用
  ),
  $border-color
);
// 边框圆角
$border-radius: () !default;
$border-radius: map.deep-merge(
  (
    "default": 8px,
    "small": 6px,
    "large": 8px,
  ),
  $border-radius
);

// 生成主题层次色
@mixin set-light-color($type, $mode, $number, $mixColor) {
  $theme-colors: map.deep-merge(
    /*
    参照生成的结果：
    "primary": (
        "base": #eed675,
        "light-1": color.min(#fff, #eed675, 10%),
        ......,
    ),
    */
      (
        $type: (
          "#{$mode}-#{$number}":
            color.mix(
              $mixColor,
              map.get($colors, $type, "base"),
              $number * 10 * 1%
            ),
        ),
      ),
    $theme-colors
  ) !global; // 将变量的作用域提升到全局范围，意味着可以在 mixin/函数外部访问这个变量
}

// 定义主题类型
$types: primary, secondary, success, warning, danger, error, info;
// 通过遍历调用set-light-color方法，生成主题层次色
@each $type in $types {
  @for $i from 1 through 9 {
    @include set-light-color($type, "light", $i, $color-white);
  }
}

// 全局属性集合
$global: (
  "base-colors": $base-colors,
  "text-color": $text-color,
  "font-size": $font-size,
  "component-size": $component-size,
  "border-color": $border-color,
);
